<template>
  <div>

    <Row style="text-align: left" v-model="status.modalSearch.isShow">
      <i-col span="24">
        <Row style="margin-top: 0.8rem">
          <i-col span="24" class="operation_item y_query_right" style="padding-right: 14px" :xs="{ span: 24, offset: 0 }" :sm="{ span: 24, offset:0 }">
            <Cascader :data="categoryList" @on-change="categorySelected" change-on-select
                      placeholder="产品分类" class="y_condition" style="text-align: left; max-width: 200px;"></Cascader>

<!--          </i-col>-->
<!--          <i-col span="17" class="operation_item">-->
            <Input v-model.trim="searchParams.productCode" placeholder="产品编号" clearable
                   class="modal_form_input y_condition"></Input>
            <DatePicker type="datetime"  :options="dateRange" @on-change="chooseStartDate"
                        placement="bottom-end" placeholder="选择起始日期时间" class="modal_form_input y_condition" format="yyyy-MM-dd"></DatePicker>
            <DatePicker type="datetime"  :options="dateRange" @on-change="chooseEndDate"
                        placement="bottom-end" placeholder="选择结束日期时间" class="modal_form_input y_condition" format="yyyy-MM-dd"></DatePicker>
            <Button type="primary" style="margin-right: 10px" icon="ios-search" @click="search" class="y_condition">查询</Button>
          </i-col>
        </Row>
        <Row v-has=tRole.ORDER_1_101 style="margin-top: 0.8rem">
          <i-col span="6" class="operation_item">
            <!-- :format="['xlc','xlm','xls','xlt','xlw','csv','xlsx']" -->
            <Upload
              ref="upload"
              style="max-width: 10em"
              :data="uploadFolderParam"
              :disabled="status.uploadXml.isUploading"
              :show-upload-list="false"
              :on-success="handleSuccess"
              :format="['xlc','xlm','xls','xlt','xlw','csv','xlsx']"
              :on-format-error="handleFormatError"
              :before-upload="handleBeforeUpload"
              :on-progress="handleProgress"
              :action="uploadUrl">
                <Button icon="ios-cloud-upload-outline" long style="min-width: 18em">
                  {{status.uploadXml.btnMsg}}
                </Button>
            </Upload>
          </i-col>
<!--          <i-col span="6"  class="operation_item">-->
<!--            &lt;!&ndash; :format="['xlc','xlm','xls','xlt','xlw','csv','xlsx']" &ndash;&gt;-->
<!--            <Button icon="md-redo" long style="min-width: 18em" @click="importEventFromFlurry">从flurry导入上周产品查看记录</Button>-->
<!--          </i-col>-->
        </Row>
      </i-col>
    </Row>

    <!--表格和分页-->
    <Table stripe border :columns="tableTitles" :data="productVisitList" ref="orderList"
           class="table_css"
           no-data-text="暂无数据"></Table>

    <div style="float: right;">
      <Page :total="tPage.total" :page-size="tPage.stepNumber" :current="tPage.currentPage" @on-change="changePage"
            @on-page-size-change="sizeChange" :page-size-opts="[40,60,80,120]"
            show-sizer show-elevator/>
    </div>


    <!--发货-->
    <Modal
      v-model="status.modalDetail.isShow" :title="status.modalDetail.title"
      :closable="true" :mask-closable="true"
      :styles="{top: '20px',bottom:'20px',width:'70%',}">
      <div style="padding-bottom: 3em">
        <!--表格和分页-->
        <Table stripe border :columns="detailTableTitles" :data="productDetailList" ref="orderList"
               class="table_css" no-data-text="暂无数据"></Table>

        <div style="float: right;">
          <Page :total="detailPage.total" :page-size="detailPage.stepNumber" :current="detailPage.currentPage" @on-change="detailChangePage"
                @on-page-size-change="detailSizeChange" :page-size-opts="[40,60,80,120]"
                show-sizer show-elevator/>
        </div>
      </div>
      <div slot="footer"></div>
    </Modal>


  </div>
</template>

<!--javascript 代码-->
<script>
  import ICol from "../../../node_modules/view-design/src/components/grid/col";
  import tiyData from "./js/productDetail/data"
  import {getProductCommonData, createCategoryList} from "../js/commonUtils"

  import {
    init,
    webList,
    webProductDetail
  } from "./js/productDetail/funs"
  import Operation from "view-design/src/components/transfer/operation";
  import ApiBase from "../../api/moudles/ApiBase"

  export default {
    components: {Operation, ICol},
    data(){
      return {
        tRole:{//权限
        },
        tPage: tiyData.tPage,
        detailPage :tiyData.tParams.detailParams.page,
        status: tiyData.tStatus,
        //搜索条件
        searchParams: tiyData.tParams.searchParams,
        tData: tiyData.tData,
        productVisitList: tiyData.tData.productVisitList,
        productDetailList: tiyData.tData.productDetailList,
        categoryList: tiyData.tData.categoryList,
        dateRange: tiyData.tData.dateRange,
        tableTitles:tiyData.tableTitles(this),
        detailTableTitles:tiyData.detailTableTitles(this),
        uploadList: [],
        uploadUrl:this.$apiAnalysis.uploadProductDetailUrl(),
      }
    },
    computed : {

      uploadFolderParam (){
        let requestMsg = ApiBase.createRequestMsg({});
        return {requestMsg: JSON.stringify(requestMsg)};
      }
    },
    methods: {

      search(){
        tiyData.tPage.currentPage = 1;
        webList(this, tiyData);
      },
      changePage(page){
        tiyData.tPage.currentPage = page;
        webList(this, tiyData);
      },
      sizeChange(p){
        tiyData.tPage.stepNumber = p;
        webList(this, tiyData);
      },
      detailChangePage(page){
        tiyData.tParams.detailParams.page.currentPage = page;
        webProductDetail(this, tiyData);
      },
      detailSizeChange(p){
        tiyData.tParams.detailParams.page.stepNumber = p;
        webProductDetail(this, tiyData);
      },
      categorySelected(value, selectedData){
        //选择分类后的条件如果改变后要修改productBatchSequenceView方法里的判断条件
        if (0 < selectedData.length) {
          tiyData.tParams.searchParams.categoryCode = selectedData[selectedData.length - 1].value;
          tiyData.tParams.searchParams.categoryLevel = selectedData[selectedData.length - 1].level;
        } else {
          tiyData.tParams.searchParams.categoryCode = '';
          tiyData.tParams.searchParams.categoryLevel = 1;
        }

      },
      chooseStartDate(date){
        tiyData.tParams.searchParams.startCreatedate = date+' 00:00:00';
      },
      chooseEndDate(date){
        tiyData.tParams.searchParams.endCreatedate = date+' 23:59:59';
      },
      getProductDetail(product){
        webProductDetail(this, tiyData, product);
      },
      handleSuccess (res, file) {
        tiyData.tStatus.uploadXml.isUploading = false;
        this.$refs.upload.clearFiles();
        tiyData.tStatus.uploadXml.btnMsg = "上传成功,点击可以继续上传";
        webList(self, tiyData);
      },
      handleBeforeUpload () {
        tiyData.tStatus.uploadXml.isUploading = true;
        tiyData.tStatus.uploadXml.btnMsg = "上传中";
        return true;
      },
      handleFormatError (file) {
        tiyData.tStatus.uploadXml.isUploading = false;
        tiyData.tStatus.uploadXml.btnMsg = "上传失败,请重新上传";
      },
      handleProgress (event,file) {
        tiyData.tStatus.uploadXml.isUploading = true;
        if (null != event && event.isTrusted){
          tiyData.tStatus.uploadXml.btnMsg = tiyData.tStatus.uploadXml.btnMsg + "...";
          if(tiyData.tStatus.uploadXml.btnMsg.length > 15){
            tiyData.tStatus.uploadXml.btnMsg = "上传中";
          }
        }
      },
    },
    mounted(){
      init(this, tiyData);
        let types = [];
        types.push(3); //列表只查询分类
        getProductCommonData(this, tiyData.tData.categoryList, types, false, createCategoryList);
      this.uploadList = this.$refs.upload.fileList;
    }
  }
</script>

<!--css样式-->
<style scoped lang="less">
@import  (once,optional)  "../css/base.less";

  .table_css {
    margin: 1rem 0px;
  }

  .modal_newuser_form {
    padding-left: 60px;
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .modal_form_input {
    max-width: 200px;
    margin-right: 10px;

  }

  .order_product_div {
    margin-top: 1rem;

  }
  .order_product_row {
    background: #f3f3f6;
    padding: 1rem;
    border: .0625rem solid #dbdbdb;
    border-bottom-style: none;
  }

  .key{
    .tiy_key;
  }
</style>
